// 配置基础API地址
const API_BASE_URL = 'http://localhost:8850';
const MESSAGE_MAX_LENGTH = 500;

new Vue({
    el: '#app',
    data() {
        return {
            message: '',
            messages: [],
            isSubmitting: false,
            isLoading: false
        }
    },
    methods: {
        // 格式化时间显示
        formatTime(timestamp) {
            return new Date(timestamp).toLocaleString();
        },

        // 获取留言列表
        async fetchMessages() {
            try {
                this.isLoading = true;
                const { data } = await axios.get(`${API_BASE_URL}/query/all`);
                this.messages = data.reverse(); // 最新留言显示在最前面
            } catch (error) {
                console.error('获取留言失败:', error);
                alert('获取留言失败，请稍后重试');
            } finally {
                this.isLoading = false;
            }
        },

        // 提交留言
        async submitMessage() {
            if (!this.validateMessage()) return;

            try {
                this.isSubmitting = true;
                const encodedMessage = encodeURIComponent(this.message);
                await axios.get(`${API_BASE_URL}/submit/${encodedMessage}`);
                this.message = '';
                await this.fetchMessages();
            } catch (error) {
                console.error('提交留言失败:', error);
                alert('提交留言失败，请稍后重试');
            } finally {
                this.isSubmitting = false;
            }
        },

        // 验证留言内容
        validateMessage() {
            const msg = this.message.trim();
            if (!msg) {
                alert('留言内容不能为空');
                return false;
            }
            if (msg.length > MESSAGE_MAX_LENGTH) {
                alert(`留言内容不能超过${MESSAGE_MAX_LENGTH}个字符`);
                return false;
            }
            return true;
        }
    },
    mounted() {
        this.fetchMessages();
    }
});
